<template>
  <div class="page-container">
    <div class="left-card">
      <treeMenu @node-click="nodeClick" />
    </div>

    <div class="right-card">
      <div class="search">
        <el-form ref="searchParams" size="small" :inline="true" :model="searchParams" label-width="90px">
          <el-form-item label="摄像头名称" prop="enterpriseName">
            <el-input v-model="searchParams.baseName" placeholder="请输入摄像头名称"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="Time">
            <el-date-picker v-model="dateScope" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="small" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-table">
        <div class="contentBtn">
          <el-button size="small" type="primary" @click="handleAdd">添加监控点</el-button>
        </div>
        <el-table v-loading="loading" :data="cameraList" border>
          <el-table-column align="center" label="序号" width="50">
            <template v-slot="scope">{{ scope.$index + (searchParams.pageNum - 1) * searchParams.pageSize + 1
              }}</template>
          </el-table-column>
          <el-table-column align="center" label="摄像头名称" prop="baseName"></el-table-column>
          <el-table-column align="center" label="播流域名" prop="domain"></el-table-column>
          <el-table-column align="center" label="摄像头状态" prop="cameraStatus"></el-table-column>
          <el-table-column align="center" label="appName" prop="appName"></el-table-column>
          <el-table-column align="center" label="streamName" prop="streamName"></el-table-column>
          <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
            <template v-slot="scope">
              <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <pagination v-show="total > 0" :limit.sync="searchParams.pageSize" :page.sync="searchParams.pageNum"
            :total="total" @pagination="getList" />
        </div>
      </div>
    </div>
    <addUpdateDialog :title="title" :visible="showDialog" :baseId="baseId" :areaDetail="areaDetail"
      @update:visible="showDialog = $event" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import addUpdateDialog from './components/addUpdateDialog.vue'
import treeMenu from './components/treeMenu.vue'
import { monitorCameraList, deleteMonitorCamera } from '@/api/cameraManagement/cameraManagement'


export default {
  name: 'cameraManagement',
  components: {
    addUpdateDialog,
    treeMenu
  },
  data() {
    return {
      cameraList: [],
      showDialog: false,
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        type: 2,
      },
      loading: true,
      total: 0,
      detailDialogVisible: false,
      title: "",
      uploadForm: {},
      addUpdateTitle: '',
      baseId: '',
      areaDetail: {},
      dateScope: [],
      rootAreaIds: [], // 树形菜单1级区域ID列表
    }
  },
  computed: {

  },
  async mounted() {
    // await this.getList()
  },
  methods: {
    //树形点击
    nodeClick(e, parent) {
      console.log('click', e, parent)
      if (e && e.id) {
        this.searchParams.ancestors = e.id;
        this.areaDetail = e
        this.getList()
      }
    },
    async handleSearch() {
      this.searchParams.pageNum = 1
      await this.getList()
    },
    handleReset() {
      const ancestors = this.searchParams.ancestors
      this.dateScope = []
      this.searchParams = {
        pageNum: 1,
        pageSize: 10,
        baseName: '',
        beginCreateTime: '',
        endCreateTime: '',
        ancestors
      }
      this.getList()
    },
    async getList() {
      if (this.dateScope) {
        this.searchParams.beginCreateTime = this.dateScope[0]
        this.searchParams.endCreateTime = this.dateScope[1]
      }
      let res = await monitorCameraList(this.searchParams)
      this.cameraList = res.rows
      this.total = res.total
      this.loading = false
    },
    closeDialog() {
      this.title = ''
      this.showDialog = false
      this.getList()
    },
    //新增
    async handleAdd() {
      this.title = '新增监控点'
      this.showDialog = true
      this.baseId = ''
    },
    //修改
    async handleEdit(row) {
      this.baseId = row.baseId
      this.title = '编辑监控点'
      let that = this
      this.$nextTick(() => {
        that.showDialog = true
      })
    },
    //删除
    async handleDelete(row) {
      const baseId = row.baseId
      this.$confirm("是否确认删除吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function () {
          return deleteMonitorCamera(baseId);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        })
        .catch(function () { });
    },
  },
  created() {

  },
}
</script>


<style lang="scss" scoped>
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index.scss";
@import '@/assets/styles/customGlobal.scss';

.page-container {
  display: flex;
  justify-content: space-between;
}

.left-card {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  max-width: 20%;
  height: 100%;
  box-sizing: border-box;
  margin-right: 20px;
  cursor: pointer;
}

.left-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
  padding-right: 20px;
}

.right-card {
  flex: 1;
  height: 100%;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.search {
  background: #fff;
  border-radius: 10px;
  padding: 15px 15px 0px 15px;
}

.content-table {
  flex: 1;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;

  .contentBtn {
    margin-bottom: 10px;
  }

  .pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>
